<template>
  <div class="chan_head" >
    <div class="genghuan"><input type="file" id="upload_file" @change="upload_file" title="更换头像">
      <img :src="img" height="100%" width="100%" style="margin-top: -100px;border-radius: 50%"/>
    </div>
    <div class="format">
      <span><strong>{{name}}</strong></span>
    </div>

  </div>
</template>

<script>
  import Bus from '../../Bus'
  import * as qiniu from 'qiniu-js'
  export default {
    name: "Avatar",
    data() {
      return {
        img:'',
        name:'',
        info:{
          name:"",
          portrait:"",
        }
        // portrait:'',
      };
    },
    // created(){
    //   Bus.$on('name',(data)=>{
    //       this.name=data
    //     }
    //   ),
    //     Bus.$on('portrait',(data)=>{
    //         this.img=data
    //       }
    //     )
    // },
    mounted(){

    },
    methods: {
      //修改头像
      upload_file:function (e) {
        let this_new01 = this;
        var file = e.target.files[0];
        var file_name=file.name;
        console.log(file_name)
        if (file){
          this.$axios.get('http://127.0.0.1:8080/upload_token', {
            headers: {
              'token': localStorage.getItem('token')
            },
            params:{
              "telephone":localStorage.getItem("telephone"),
              "filename":file_name,
            },
          })
            .then(function (response) {
              console.log(response.data);
              var uplaod_token=response.data.upload_token;
              var file_name=response.data.file_name;
              var newfile = new File([file], file_name);
              var config = {
                useCdnDomain: false,
                disableStatisticsReport: true,
                retryCount: 6,
                region: qiniu.region.z2
              };
              var putExtra = {
                fname: "",
                params: {},
                mimeType: ["image/png", "image/jpeg", "image/gif"]
              };
              putExtra.params["x:name"] = file_name.split(".")[0];
              var subscription;
              // 调用sdk上传接口获得相应的observable，控制上传和暂停
              var observable = qiniu.upload(file, file_name, uplaod_token, putExtra);
              subscription = observable.subscribe({
                next(res){
                  // ...
                },
                error(err){
                  console.log(err);
                },
                complete(res){
                  console.log(res);
                  // Bus.$emit('img',res.key)
                  this_new01.open1()
                  this_new01.img='http://pzrpp4zme.bkt.clouddn.com/'+res.key
                  // Bus.$emit('img',res.key)
                }
              });

            })
        }
      },

      open1: function () {
        this.$message({
          showClose: true,
          message: '头像修改成功',
          type: 'success'
        });
      },
    },
    created() {
      var telephone=this.$store.state.telephone
      var this_=this
      this.$axios.get('http://127.0.0.1:8080/record/ziliao', {
        params: {
          telephone:telephone
        }
      })
        .then(function (response) {
          this_.form=response.data
          console.log(this_.form)
          this_.$store.state.user_info=this_.form
          // console.log(this_.$store.state.user_info[0].name)
          // console.log(this_.$store.state.user_info[0].portrait)
          this_.img=this_.$store.state.user_info[0].portrait
          this_.name=this_.$store.state.user_info[0].name
          // Bus.$emit('name',this_.$store.state.user_info[0].name)
          // Bus.$emit('portrait',this_.$store.state.user_info[0].portrait)
          // console.log(this_.form);
        })
        .catch(function (error) {
          console.log(error);
        });


    },

  };

</script>

<style scoped>
  .chan_head{
    /*padding: 100px 0 0 0;*/
  }
  .genghuan {
    width: 130px;
    height: 130px;
    background-image: url("https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png");
    border-radius: 50%;
    background-size: cover;
    margin-left: 50px;
  }
  #upload_file{
    opacity: 0;
    width: 110px;
    height: 100px;
  }
  .genghuan #upload_file:hover{
    cursor: pointer;
  }
  .format{
    margin-left: 50px;
    padding: 10px;
    width: 120px;
    text-align: center;
    color: black;
  }
  .format span{
    font-size: 13px;
    color: #78797f;
  }


</style>
